<html lang="en">
  <head>
	<script>
	
		function findCedula(cedula)
		{
			var parametros = 'cedula='+cedula;		
			$.ajax({
			  url: "search.php?" + parametros,
			  context: document.body
			}).done(function(param) { 		
					var data = JSON.parse(param);
					document.getElementById("txtNombre").value = data[0];
					document.getElementById("txtEdad").value = data[1];
					document.getElementById("txtTipo").value = data[2];
					document.getElementById("txtTelefono").value = data[3];
					document.getElementById("txtDireccion").value = data[4];
					document.getElementById("txtEmail").value = data[5];					
			});
		}
		function clean()
		{
			document.getElementById("txtCedula").value = '';
			document.getElementById("txtNombre").value = '';
			document.getElementById("txtEdad").value = '';
			document.getElementById("txtTipo").value = '';
			document.getElementById("txtTelefono").value = '';
			document.getElementById("txtDireccion").value = '';
			document.getElementById("txtEmail").value = '';			
			document.getElementById("txtCedula").focus();

		}
		function save()
		{
			var parametros = ( "cedula="+document.getElementById("txtCedula").value+ "&nombres="+ document.getElementById("txtNombre").value+ "&edad="+document.getElementById("txtEdad").value
			+ "&tipo="+ document.getElementById("txtTipo").value+ "&telefono="+document.getElementById("txtTelefono").value+ "&direccion="+document.getElementById("txtDireccion").value + "&email="+document.getElementById("txtEmail").value); 
			$.ajax({
			  url: "save.php?" + parametros,
			  context: document.body,
			}).done(function(param) { 		
				clean();
				
			});			
		}

	</script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Recepcion</title>
 
    <!-- CSS de Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
 
    <!-- librerías opcionales que activan el soporte de HTML5 para IE8 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>	
  <body>
		<fieldset>
			<!-- Form Name -->
			<legend>Pacientes</legend>

			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="txtCedula">Cedula</label>
			  <div class="controls">
				<input id="txtCedula" name="txtCedula" type="text" placeholder="Cedula de Identidad" class="input-medium" required="" onblur="findCedula(txtCedula.value)">
				
			  </div>
			</div>

			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="txtNombre">Nombres</label>
			  <div class="controls">
				<input id="txtNombre" name="txtNombre" type="text" placeholder="Escriba el nombre" class="input-xlarge" required="">
				
			  </div>
			</div>

			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="txtEdad">Edad</label>
			  <div class="controls">
				<input id="txtEdad" name="txtEdad" type="text" placeholder="ej: 18" class="input-mini">
				
			  </div>
			</div>

			<!-- Select Basic -->
			<div class="control-group">
			  <label class="control-label" for="txtTipo">Tipo</label>
			  <div class="controls">
				<select id="txtTipo" name="txtTipo" class="input-mini">
				  <option>A</option>
				  <option>M</option>
				  <option>D</option>
				</select>
			  </div>
			</div>

			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="txtTelefono">Teléfono</label>
			  <div class="controls">
				<input id="txtTelefono" name="txtTelefono" type="text" placeholder="" class="input-xlarge">
				
			  </div>
			</div>

			<!-- Textarea -->
			<div class="control-group">
			  <label class="control-label" for="txtDireccion">Dirección</label>
			  <div class="controls">                     
				<textarea id="txtDireccion" name="txtDireccion"></textarea>
			  </div>
			</div>
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="txtEmail">Correo Electronico</label>
			  <div class="controls">
				<input id="txtEmail" name="txtEmail" type="text" placeholder="" class="input-xlarge">
				
			  </div>
			</div>

			<!-- Button (Double) -->
			<div class="control-group">
			  <label class="control-label" for="btnGuardar"></label>
			  <div class="controls">
				<button id="btnGuardar" name="btnGuardar" class="btn btn-primary" onclick="save()" >Guardar</button>
				<button id="btnCancelar" name="btnCancelar" class="btn btn-danger" onclick="clean()">Cancelar</button>
			  </div>
			</div>

			</fieldset>
	<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
	
  </body>  
</html>